/*OrderDetails.js*/

import React  from 'react';
import { connect } from 'dva';
import {Card,Row,Col,Table} from 'antd';
import moment from 'moment';
import DefinitionList from '../../../components/DefinitionList';
import smileImg from '../../../assets/images/smile.png';
import sadImg from '../../../assets/images/sad.png';
import StockPerformance from './StockPerformance2';

import style from './orderDetails.less';
/**
 * OrderInfo 获取订单信息数据
 */
const OrderInfo = ({
	data,
})=>{
	console.log('OrderInfo>',data)
	if(data){
		const fieldList = data.field;
		const info = data.info
		return(
			<Card bordered={false} style={{marginRight:50}}>
				<Row className={style.info} gutter={0} >
					<Col>
						<h3 style={{textAlign:'left',marginBottom:10}}>订单详情</h3>
						{
		          fieldList.map((item, index) => (
		            <Col key={index}>
		              <DefinitionList name={`${item.name}:`} value={info[item.id]} />
		            </Col>
		          ))
		        }
						<img
							src={info.score >= 60 ? smileImg : sadImg }
							width='128'
						/>
					</Col>
				</Row>
			</Card>
		)
	}else {
		return (
			<div>暂无数据</div>
		)
	}
	
}

/**
 * OrderList 订单列表数据
 */
const OrderList = ({
	data,
})=>{
	console.log('OrderList>',data)
	if(data){
		const columns = []
		data.field.map((item, index) => {
			columns.push({
				title: item.name,
				dataIndex: item.id,
				key: item.id,
				sorter: (a, b) => a[item.id] - b[item.id],
			})
		})
		columns.map(item=>{
			if(item.dataIndex == "tradeType"){
				item.render=(text, row, index) => text==='Buy'?<span style={{color:"red"}}>做多</span>:<span style={{color:"green"}}>做空</span>
			}
		})
		const orderListProps={
			dataSource:data.list,
			columns:columns,
		}
		return(
			<div>
				<Table
					{...orderListProps}
					pagination={false}
					record={record => `${record.tradeType}-${record.buyPrice}-${record.openTime}-${record.sellPrice}-${record.closeTime}-${record.quantity}-${record.fee}
					-${record.pnl}-${record.yield}`}
				/>
			</div>
		)
	}else {
		return null
	}
	
}


/**
 * [OrderDetails 交易情况]
 * 引用组件 
 * [OrderInfo 获取订单信息数据]
 * [OrderList 订单列表数据]
 */

class OrderDetails extends React.Component {
	state={
		data:this.props.dailyReplay.orderDetails
	}
	// componentWillMount() {
	// 	this.fetchData(this.props)
	// }
	componentDidMount() {
		console.log('OrderDetails>fetchData1',this.props)
		this.fetchData(this.props)
	}
	componentWillReceiveProps(nextProps) {
		// console.log(112211,nextProps)
      // 当输入改变时，重新请求数据
    if ((nextProps.begindate !== this.props.begindate) || (nextProps.enddate !== this.props.enddate) || (nextProps.cpGroupId !== this.props.cpGroupId)) {
        this.fetchData(nextProps)
    }
    // 当输出改变时，重新设置state.data
    if (nextProps.orderDetails !== this.props.orderDetails) {
      this.setState({
        data:nextProps.orderDetails,
      })
    }
  }
	fetchData=(props)=>{
		console.log('OrderDetails>fetchData',props,this.props)
		props.dispatch({
			type: `dailyReplay/getOrderDetails`,
			payload:props
		})
	}
	render() {
		const {data} =this.state;
		const {orderDetails} = this.props;
		// console.log('OrderDetails>data',this.props.dailyReplay,this.props,orderDetails)
		// const currentObj=this.props.dailyReplay.tradeRecords.list.find(item=>item.cpGroupId===this.props.dailyReplay.cpGroupId)
		// console.log(11221,this.props.dailyReplay,this.state,currentObj)
		return(
			<Card>
				<div>
					<Row>
						<Col span={8}>
							<OrderInfo
								data={orderDetails.oIres}
							/>
						</Col>
						<Col span={16}>
							<StockPerformance data={orderDetails.sPres}/>
						</Col>
					</Row>
					<Row>
						<OrderList
							data={orderDetails.oLres}
						/>
					</Row>
				</div>
			</Card>
		)
	}
}

OrderDetails.defaultProps={
	trader:null,
	stock:null,
	begindate:null,
	enddate:null,
	orderId:null,
	orderDetails:[]
}

export default connect(({ dailyReplay }) => ({ dailyReplay }))(OrderDetails)
